.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.单行省略 {
  overflow: hidden;
  /*文本不会换行*/
  white-space: nowrap;
  /*当文本溢出包含元素时，以省略号表示超出的文本*/
  text-overflow: ellipsis;
}
.多行省略 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 滚动条隐藏 */
/* chrome */
body::-webkit-scrollbar {
  display: none;
}
/* IE */
body {
  -ms-overflow-style: none;
}
/* FireFox */
/* https://blog.csdn.net/weixin_44070058/article/details/112555450 */
.按原格式显示多个空格以及自动换行 {
  white-space: pre-wrap;
  word-break: break-all;
}
.宽高比例 {
  aspect-ratio: 2 / 1;
}
.grid {
  display: grid;
  /* 每个宽度占据22%，平铺 */
  grid-template-columns: repeat(auto-fill, 22%);
  /* 行、列间距 */
  grid-gap: 16px 4%;
}
.grid .grid-item {
  grid-column-start: span 2;
}
